<div class="wrapper" data-ng-controller="gnViewerController as ctrl">

  <div id="map"
       ol-map="map"
       class="map"
       gn-vector-feature-tool-tip="map">

  </div>
  <div gn-gfi="" map="map"></div>
  <gn-features-tables gn-features-tables-map="map"></gn-features-tables>

  <div gn-localisation-input map="map"></div>

  <!-- profile graph (data will come through the service) -->
  <gn-profile map="map"></gn-profile>

  <!--Top right buttons - Tools-->
  <div class="tools" gi-btn-group>
    <button class="btn btn-default" ng-model="activeTools.addLayers"
            type="submit" gi-btn="active" ng-hide="disabledTools.addLayers"
            aria-label="{{'addLayers' | translate}}">
      <span class="fa fa-plus"></span>
      <span class="label" ng-show="showToolLabels" translate="">addLayers</span>
      <span role="tooltip" translate="">addLayers</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.layers"
            type="submit" gi-btn="active" ng-hide="disabledTools.layers"
            aria-label="{{'Layers' | translate}}">
      <span class="fa fa-tasks"></span>
      <span class="label" ng-show="showToolLabels" translate="">Layers</span>
      <span role="tooltip" translate="">Layers</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.projectionSwitcher"
            type="submit" gi-btn="active" ng-hide="disabledTools.projectionSwitcher">
      <span class="fa fa-th-large "></span>
      <span class="label" ng-show="showToolLabels" translate="">projectionSwitcher</span>
      <span role="tooltip" translate="">projectionSwitcher</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.legend"
            type="submit" gi-btn="active" ng-hide="disabledTools.legend"
            aria-label="{{'mapLegend' | translate}}">
      <span class="fa fa-th-list"></span>
      <span class="label" ng-show="showToolLabels" translate="">mapLegend</span>
      <span role="tooltip" translate="">mapLegend</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.filter"
            type="submit" gi-btn="active" ng-hide="disabledTools.filter"
            aria-label="{{'filterData' | translate}}">
      <span class="fa fa-filter"></span>
      <span class="label" ng-show="showToolLabels" translate="">filterData</span>
      <span role="tooltip" translate="">filterData</span>
    </button>

    <button class="btn btn-default" ng-model="activeTools.processes"
            type="submit" gi-btn="active" ng-hide="disabledTools.processes"
            aria-label="{{'processesTool' | translate}}">
      <span class="fa fa-cogs"></span>
      <span class="label" ng-show="showToolLabels" translate="">processesTool</span>
      <span role="tooltip" translate="">processesTool</span>
    </button>

    <button class="btn btn-default" ng-model="activeTools.contexts"
            type="submit" gi-btn="active" ng-hide="disabledTools.contexts"
            aria-label="{{'Contexts' | translate}}">
      <span class="fa fa-map"></span>
      <span class="label" ng-show="showToolLabels" translate="">Contexts</span>
      <span role="tooltip" translate="">Contexts</span>
    </button>
    <button class="btn btn-default" ng-model="activeTools.print"
            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.print"
            aria-label="{{'Print' | translate}}">
      <span class="fa fa-print"></span>
      <span class="label" ng-show="showToolLabels" translate="">Print</span>
      <span role="tooltip" translate="">Print</span>
    </button>

    <button class="btn btn-default" ng-model="mInteraction.active"
            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.mInteraction"
            aria-label="{{'Measure' | translate}}">
      <span class="fa fa-expand"></span>
      <span class="label" ng-show="showToolLabels" translate="">Measure</span>
      <span role="tooltip" translate="">Measure</span>
    </button>
    <button class="btn btn-default" ng-model="drawVector.active"
            type="submit" gi-btn="active" ng-hide="is3dEnabled || disabledTools.drawVector"
            aria-label="{{'Annotations' | translate}}">
      <span class="fa fa-pencil"></span>
      <span class="label" ng-show="showToolLabels" translate="">Annotations</span>
      <span role="tooltip" translate="">Annotations</span>
    </button>

    <button class="btn btn-default" type="submit" ng-click="syncMod()" ng-hide="disabledTools.syncAllLayers"
            aria-label="{{'syncAllLayers' | translate}}">
      <span class="fa fa-sync" ng-class="synAllLayers ? 'fa-lock' : 'fa-unlock'"/>
      <span class="label" ng-show="showToolLabels" translate="">syncAllLayers</span>
      <span role="tooltip" translate="">syncAllLayers</span>
    </button>
  </div>
  <!--Bottom right buttons - Navigation-->
  <div class="tools control-tools">
    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,1)"
            aria-label="{{'ZoomIn' | translate}}">
      <span class="fa fa-plus"></span>
      <span role="tooltip" data-translate="">ZoomIn</span>
    </button>
    <button class="btn btn-default" type="submit" data-ng-click="zoom(map,-1)"
            aria-label="{{'ZoomOut' | translate}}">
      <span class="fa fa-minus"></span>
      <span role="tooltip" data-translate="">ZoomOut</span>
    </button>
    <button class="btn btn-default" type="submit" data-ng-click="zoomToMaxExtent(map)"
            aria-label="{{'ZoomToMapMaxExtent' | translate}}">
      <span class="fa fa-arrows-alt"></span>
      <span role="tooltip" data-translate="">ZoomToMapMaxExtent</span>
    </button>
    <button class="btn btn-default btn-3d" type="submit"
            data-ng-if="is3DModeAllowed"
            data-ng-click="switch2D3D(map)"
            aria-label="{{'switchFrom2DTo3D' | translate}}">
      <span class="badge badge-left badge-2d" data-ng-hide="is3dEnabled">2D</span>
      <span class="badge badge-left badge-3d" data-ng-show="is3dEnabled">3D</span>
      <span class="fa fa-cube"/>
      <span class="badge badge-right badge-2d" data-ng-hide="is3dEnabled">2D</span>
      <span class="badge badge-right badge-3d" data-ng-show="is3dEnabled">3D</span>
      <span role="tooltip" data-translate="">switchFrom2DTo3D</span>
    </button>
    <button gn-graticule-btn="map" class="btn btn-default" type="submit"
            ng-hide="disabledTools.graticule"
            graticule-ogc-service="graticuleOgcService"></button>
  </div>

  <!-- Add layers -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.addLayers">
    <div class="panel-heading">
      <h3>{{'AddALayer' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.addLayers" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <tabset class="info-tabset">

        <tab heading="{{'addLayerFromMaps' | translate}}"
             active="addLayerTabs.maps"
             role="tab">
          <br/>
          <div data-gn-search-layer-for-map="map" data-mode="map"></div>
        </tab>

        <tab heading="{{'SearchLayer' | translate}}"
             active="addLayerTabs.search"
             role="tab">
          <br/>
          <div data-gn-search-layer-for-map="map"></div>
        </tab>

        <tab heading="{{'addLayerFromServices' | translate}}"
             active="addLayerTabs.services"
             role="tab">
          <br/>   
          <div gn-wms-import="wms"
               gn-wms-import-map="map"
               gn-wms-import-url="addLayerUrl.wms"
               services-list-from-catalog="true"></div>

          <div gn-wms-import="wmts"
               gn-wms-import-map="map"
               gn-wms-import-url="addLayerUrl.wmts"></div>

          <div gn-wms-import="wfs"
               gn-wms-import-map="map"
               gn-wms-import-url="addLayerUrl.wfs"
               services-list-from-catalog="true"></div>
        </tab>
        <tab heading="{{'addLayerFromFiles' | translate}}"
             active="addLayerTabs.kml"
             role="tab">
          <label>{{'LayerKML' | translate}}</label>
          <div gn-kml-import="" gn-kml-import-map="map"></div>
        </tab>
      </tabset>
    </div>
  </div>

  <!-- Manage layers -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.layers">
    <div class="panel-heading">
      <h3>{{'ManageLayers' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.layers" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body layers">
      <div gn-layermanager="" gn-layermanager-map="map"></div>
      <br />
      <div gn-baselayerswitcher=""
          gn-baselayerswitcher-map="map"
          data-dropup=""></div>
      <br data-ng-show="is3dEnabled"/>
      <div data-gn-terrain-switcher="ol3d"
          data-dropup=""
          data-ng-show="is3dEnabled"></div>
    </div>
  </div>

  <!-- Projection Switcher -->
  <div class="panel-default panel-tools"
       ng-show="activeTools.projectionSwitcher">
      <div gn-projection-switcher="map"></div>
   </div>


  <!-- Legend -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.legend">
    <div class="panel-heading">
      <h3>{{'mapLegend' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.legend" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-carousel" gn-legend-panel="map"></div>
  </div>

  <!-- Filter data -->
  <div class="panel panel-default panel-tools gn-data-filter-view"
       ng-show="activeTools.filter">
    <div class="panel-heading">
      <h3>{{'filterData' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.filter" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <p translate="" class="text-muted">filterDataDescription</p>
      <div data-gn-data-filter-view="map"/>
    </div>
  </div>

  <!-- Maps -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.contexts">
    <div class="panel-heading">
      <h3>{{'MapContexts' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.contexts" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <div gn-ows-context="" map="map" user="user"></div>
    </div>
  </div>

  <!--Measure Info Panel-->
  <div class="panel panel-default panel-tools"
       ng-show="mInteraction.active">
    <div class="panel-heading">
      <h3>{{'Measures' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="mInteraction.active" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <div class="gn-measure-text">
        <div class="text-muted hidden-print" translate>measure_instruction</div>
        <dl class="dl-horizontal">
          <dt>{{'Distance' | translate}}</dt>
          <dd>{{measureObj.distance}}</dd>
          <dt>{{'Surface' | translate}}</dt>
          <dd data-ng-bind-html="measureObj.surface"></dd>
        </dl>
      </div>
    </div>
  </div>

  <!--Draw Panel-->
  <div class="panel panel-default panel-tools"
       ng-show="drawVector.active">
    <div class="panel-heading">
      <h3>{{'Annotations' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="drawVector.active" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <div class="gn-draw-styleform" gn-draw="" map="map" vector="drawVector">
      </div>
    </div>
  </div>

  <!-- Print -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.print">
    <div class="panel-heading">
      <h3>{{'PrintTheMap' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.print" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <div gn-mapprint="" print-active="activeTools.print" map="map"></div>
    </div>
  </div>

  <!-- WPS processes panel -->
  <div class="panel panel-default panel-tools"
       ng-show="activeTools.processes">
    <div class="panel-heading">
      <h3>{{'processesTool' | translate}}
        <button type="button" class="btn btn-default close"
                ng-model="activeTools.processes" gi-btn>
          &times;
        </button>
      </h3>
    </div>
    <div class="panel-body">
      <p translate="" class="text-muted">WPSDescription</p>
      <tabset class="info-tabset">
        <tab heading="{{'wpsByUrl' | translate}}"
             active="wpsTabs.byUrl"
             role="tab">
          <br/>
          <gn-wps-url-discovery wps-link="selectedWps"/>
        </tab>
        <tab heading="{{'wpsRecent' | translate}}"
             active="wpsTabs.recent"
             role="tab">
          <br/>
          <gn-wps-recent-list wps-link="selectedWps"/>
        </tab>
      </tabset>
      <gn-wps-process-form map="map" wps-link="selectedWps"
        ng-if="activeTools.processes"/>
    </div>
  </div>
</div>
